Create dynamic routes with next.js

• Next.js supports dynamic pages using [] in the filename to define the dynamic part of the route
• Create a folder called posts, and within it create a file called posts/[title].tsx

import { Article } from "../../components/Article";

export default function Post() {
  return (
    <Article>
      <h1>Post title</h1>
      <p>Lorem ipsum</p>
    </Article>
  );
}

• This creates a function Post that renders an article component at any url we provide under the posts directory.
• To render dynamic content from the route we need to use useRouter and assign it to a variable

import { useRouter } from "next/router";

• To use the data from the router, assign it to a variable then log out the query component to see what's contained inside of it:

const router = useRouter();
console.log(router.query);

• In the conosle we'll see that there is a title variable, we can assign that to a variable and render it to the page:

const {title} = router.query
...
<h1>Post Title: {title}</h1>

• Note that url parameters are also passed to the router and are available in the query object.

Adding absolute imports to Next.js app

• Next.js supports absolute imports
• 📜 Next.js Documentation
• To add absolute imports, go to tsconfig.json and add the following key: value pairs:

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@components/*": ["components/*"]
    }
  }
}

• Now whenever we import a component from components/ we can import it with @components/* where * is the file name.
• Let's refactor our code so wherever we were importing our Article component, we can now import { Article } from '@components/Article

  Previous      Next